<template>
  <div class="user">
    <div class="userInfo">
      <el-avatar :size="35" :src="avatarUrl" />
      <span class="userName">用户名</span>
    </div>
    <el-button @click="logout">登出</el-button>
  </div>
  <div class="menu">
    <el-menu :default-active="11" :default-openeds="[1]" size="small" @select="menuSelect">
      <template v-for="menu in menuConfig">
        <el-sub-menu :index="menu.id" :key="menu.id" v-if="menu.children?.length">
          <template #title>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item :index="child.id" v-for="child in menu.children" :key="child.id">{{ child.label }}</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="menu.id" :key="menu.id + 'else'">{{ menu.label }}</el-menu-item>
      </template>
    </el-menu>
  </div>
  <div class="bottom">
    <h5>设备信息</h5>
    <div class="operate">
      <span>设备连接状态：已连接</span>
      <el-button size="small">重试</el-button>
    </div>
    <div class="operate">
      <span>连接方式：USB</span>
      <el-button size="small">切换为WiFi</el-button>
    </div>
    <div><span>设备型号：Mate40</span></div>
    <div><span>操作系统：OpenHarmony</span></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

const state = reactive({
  avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
})

const { avatarUrl } = toRefs(state)

const menuConfig = [
  {
    id: 1, label: '整机性能测试', children: [
      {
        id: 11,
        label: '系统性能测试'
      },
      {
        id: 12,
        label: '内存测试'
      }
    ]
  },
  {
    id: 2, label: '游戏稳定性测试'
  }
]

const router = useRouter()
const logout = () => {
  router.push('/')
}
const menuSelect = (id) => {
  console.log(id)
}
</script>

<style scoped lang="scss">
.user {
  padding-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .userInfo {
    display: flex;
    align-items: center;

    .userName {
      margin-left: 10px;
      color: #666;
    }
  }

}

.menu {
  height: 600px;
  overflow-y: scroll;

  &:deep {
    .el-sub-menu__title {
      height: 40px;
      font-size: 12px;
    }

    .el-menu-item {
      height: 40px;
      font-size: 12px;
    }
  }
}

.bottom {
  border-top: 1px solid #ccc;
  padding: 10px 10px 10px 0;

  h5 {
    font-size: 14px;
  }

  .operate {
    display: flex;
    justify-content: space-between;
  }

  span {
    font-size: 12px;
    line-height: 30px;
  }
}
</style>